<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
   <el-form-item label="标题：" prop="paymentTitle">
      <el-input v-model="ruleForm.paymentTitle" />
    </el-form-item>
    <el-form-item label="付款金额：" prop="paymentMoneys">
      <el-input v-model="ruleForm.paymentMoneys" />
    </el-form-item>
      <el-form-item label=" 结算方式：" prop="paymentMoney">
      <!-- <el-input v-model="ruleForm.settlementChargeBillingmethod" /> paymentManner-->
      <el-radio-group v-model="ruleForm.paymentMoney">
        <el-radio :label="0">微信支付</el-radio>
        <el-radio :label="10">支付宝支付</el-radio>
        <el-radio :label="20">银联支付</el-radio>
        <el-radio :label="30">企业转账</el-radio>
        <el-radio :label="40">线下支付</el-radio>
        <el-radio :label="50">其它</el-radio>
      </el-radio-group>
    </el-form-item>
     <!-- <el-form-item label=" 付款方式：" prop="paymentManner">
      <el-radio-group v-model="ruleForm.paymentManner">
        <el-radio :label="1">微信支付</el-radio>
        <el-radio :label="2">支付宝支付</el-radio>
        <el-radio :label="3">银联支付</el-radio>
      </el-radio-group>
    </el-form-item> -->
    <el-form-item label="支付对象：" prop="paymentWhoPay">
      <el-input v-model="ruleForm.paymentWhoPay" />
    </el-form-item>
    <el-form-item label="开户行：" prop="paymentBank">
      <el-input v-model="ruleForm.paymentBank" />
    </el-form-item>
    <el-form-item label="银行账户：" prop="paymentAccount">
      <el-input v-model="ruleForm.paymentAccount" />
    </el-form-item>
      <el-form-item label=" 状态：" prop="paymentState">
      <el-radio-group v-model="ruleForm.paymentState">
        <!-- 待审批=1,已通过,已拒绝,待提交 -->
          <el-radio :label="1">待审批</el-radio>
          <el-radio :label="2">已通过</el-radio>
          <el-radio :label="3">已拒绝</el-radio>
          <el-radio :label="4">待提交</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="付款日期：" prop="paymentData">
          <el-date-picker
            v-model="ruleForm.paymentData"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
    </el-form-item>
    <el-form-item label="用途描述：" prop="paymentDescription">
      <el-input v-model="ruleForm.paymentDescription" type="textarea" />
    </el-form-item>
    <el-form-item label="备  注：" prop="paymentRemark">
        <el-input v-model="ruleForm.paymentRemark" type="textarea" />
    </el-form-item>
    <!-- <el-form-item label="提交人：" prop="paymentApplicant">
        <el-input v-model="ruleForm.paymentApplicant"  />
    </el-form-item>
     <el-form-item label="公司：" prop="firmId">
        <el-input v-model="ruleForm.firmId" />
    </el-form-item> -->
    <el-form-item label=" 票据附件：" prop="paymentTicketAttachments">
         <el-upload
    class="avatar-uploader"
    action="http://47.96.140.177:8000/Settlementwrite/api/Payments/IFileImg"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
  >
    <img v-if="ruleForm.paymentTicketAttachments" :src="ruleForm.paymentTicketAttachments" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        添加
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">清空</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMenuItem, type ComponentSize, type FormInstance, type FormRules,ElMessage } from 'element-plus'
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import http from '@/Http';
import { Plus } from '@element-plus/icons-vue'

const route = useRoute();
const router = useRouter();


// const addOption=()=> {
//     // 获取文本框中的值
//     var newOptionText = document.getElementById('new-option-text').value;
    
//     // 确保文本框不为空
//     if (newOptionText.trim() === '') {
//         alert('请输入一个有效的选项');
//         return;
//     }
    
//     // 获取radio按钮的容器
//     var radioGroup = document.getElementById('radio-group');
    
//     // 创建一个新的label和radio按钮
//     var newLabel = document.createElement('label');
//     var newRadio = document.createElement('input');
//     newRadio.type = 'radio';
//     newRadio.name = 'options';
//     newRadio.value = newOptionText;
    
//     // 设置新label的文本内容
//     newLabel.appendChild(newRadio);
//     newLabel.appendChild(document.createTextNode(newOptionText));
//     newLabel.appendChild(document.createElement('br'));  // 添加换行
    
//     // 将新的label添加到radio按钮的容器中
//     radioGroup.appendChild(newLabel);
    
//     // 清空文本框
//     document.getElementById('new-option-text').value = '';
// }


interface RuleForm {
  paymentTitle: string
  paymentMoneys: string
  paymentMoney: string
  // paymentManner: string
  paymentWhoPay: string
  paymentBank: string
  paymentAccount: string
  paymentData: string
  paymentDescription: string
  paymentRemark: string
  paymentTicketAttachments: string
  firmId: string
  paymentApplicant: string
  paymentState: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  paymentTitle: '',
  paymentMoneys: '',
  paymentMoney: '',
  // paymentManner: '',
  paymentWhoPay: '',
  paymentBank: '',
  paymentAccount: '',
  paymentData: '',
  paymentDescription: '',
  paymentRemark: '',
  paymentTicketAttachments: '',
  firmId: '',
  paymentApplicant: '',
  paymentState: '',
})


const handleAvatarSuccess = (url: any) => {
  ruleForm.paymentTicketAttachments = "http://47.96.140.177:8000/Settlementwrite" + url;
  console.log(url);
}


const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
  paymentTitle: [
     { required: true, message: '标题不能为空', trigger: 'blur' },
  ],
     paymentMoneys: [
     { required: true, message: '付款金额不能为空', trigger: 'blur' },
    ],
  // paymentManner: [
  //   { required: true, message: '结算方式不能为空', trigger: 'blur' },
  //   // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  // ],
  paymentWhoPay: [
     { required: true, message: '支付对象不能为空', trigger: 'blur' },
    ],
  paymentBank: [
      { required: true, message: '开户行不能为空', trigger: 'blur' },
    ],
  paymentAccount: [
    { required: true, message: '银行账户不能为空', trigger: 'blur' },
    ],
  paymentData: [
    { required: true, message: '付款日期不能为空', trigger: 'blur' },
    ],
  paymentDescription: [
    { required: true, message: '用途描述不能为空', trigger: 'blur' },
    ],
  paymentRemark: [
    { required: true, message: '备 注不能为空', trigger: 'blur' },
  ],
  firmId: [
    { required: true, message: '公司不能为空', trigger: 'blur' },
    ],
  paymentApplicant: [
    { required: true, message: '申请人不能为空', trigger: 'blur' },
  ],

})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post("Settlementwrite/api/Payments/Add", ruleForm)
        .then(res => {
          if (res.data.data > 0) {
             ElMessage.success('添加成功')
            console.log(res.data)
             router.push('/PaymentManageList')
          } else {
            ElMessage.success('添加失败')
          }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}


// onMounted(() => {
//   handleChange();
// })
</script>
<style>
select {
    width: 200px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
</style>

<style>
.page {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title {
    text-align: center;
    margin-bottom: 20px;
}

.demo-ruleForm {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.el-form-item {
    margin-bottom: 20px;
}

.el-input,
.el-select,
.el-date-editor {
    width: 100%;
}

.el-button {
    margin-right: 10px;
}
</style>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>